/*
 * @Title: 攻略-更多组件
 * @Created by: gsjPC 
 */
<template>
	<view class="uni-tab-bar">
		<!-- 选项卡头部 -->
		<view class="glmoreTab">
			<view
				v-for="(tab,index) in tabBars"
				:key="tab.id"
				:class="tabIndex==index ? 'active' : ''"
				@click="tapTab(index)">
				{{tab.name}}
			</view>
		</view>
		<!--选项卡内容 -->
		<view
		class="glmoreTabCon"
		:current="tabIndex"
		:duration="300">
			<good-assess-select v-if="tabIndex == 0"></good-assess-select>
			<view-type v-if="tabIndex == 1"></view-type>
			<leval v-if="tabIndex == 2"></leval>
		</view>
	</view>
</template>

<script>
	import goodAssessSelect from '@/pages/gonglue/guanFangGongLue/goodAssessSelect'
	import viewType from '@/pages/gonglue/guanFangGongLue/viewType'
	import leval from '@/pages/gonglue/guanFangGongLue/leval'
	export default {
		components:{
			goodAssessSelect,
			viewType,
			leval
		},
		data() {
			return {
				tabIndex: 0 ,//默认选中第一个tab 
				tabBars:[
					{name:'好评优选'},
					{name:'景区类型'},
					{name:'等级'},
				]
			}
		},
		methods:{
			tapTab(index){
				this.tabIndex = index
			}
		}
	}
</script>

<style>
	.glmoreTab{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top:-82upx;
		margin-bottom: 40upx;
		
	}
	.glmoreTab > view{
		flex: 1;
		text-align: center;
		font-size: 24upx;
		color: #0075EE;
		line-height: 54upx;
		position: relative;
	}
	.glmoreTab > view:after{
		content:"";
		display: inline-block;
		margin-left:10upx;
		margin-bottom: 6upx;
		border:10upx solid transparent;
		border-bottom-color: #55A0FF !important;
	}
	.glmoreTab .active{
		font-weight: bold;
	}
	.glmoreTab .active:before{
		content:"";
		width:102upx;
		height: 3upx;
		background:linear-gradient(left,#8EC6FF,#6592F7);
		display:block;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -66upx;
	}
	 .glmoreTab > .active:after{
		content:"";
		display: inline-block;
		margin-left:10upx;
		margin-bottom: -6upx;
		border:10upx solid transparent;
		border-bottom-color: #55A0FF !important;
		transform: rotateX(180deg);
	}
	.glmoreTabCon{
		height: calc(100vh - 110px);
		width: 100%;
		overflow: scroll;
		position: fixed;
		bottom: 0;
	}
</style>
